import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";

export function IssuesSummaryChart() {
	return (
		<Card className="gap-4">
			<CardHeader>
				<CardTitle className="flex justify-between">
					<span>Issues Summary</span>
					<div className="flex items-center gap-3">
						<span>32</span>
						<Separator
							orientation="vertical"
							className="data-[orientation=vertical]:h-4"
						/>
						<span className="dark:text-lime-400 text-lime-500">31</span>
					</div>
				</CardTitle>
				<CardDescription>Showing summary issues</CardDescription>
			</CardHeader>
			<CardContent className="h-full gap-2 flex flex-col">
				<Progress
					value={33}
					className="h-full"
					label="BUG"
					showValue
					formatValue={(val) => `${val} %`}
				/>
				<Progress
					value={50}
					className="h-full"
					variant="destructive"
					label="SCRIPT"
					showValue
					formatValue={(val) => `${val} %`}
				/>
				<Progress
					value={27}
					className="h-full"
					label="ENV"
					showValue
					formatValue={(val) => `${val} %`}
				/>
				<Progress
					value={0}
					className="h-full"
					label="UNDO"
					showValue
					formatValue={(val) => `${val} %`}
				/>
			</CardContent>
		</Card>
	);
}
